<template>
    <div class="breadCrumb" seprater="|">
        <router-link :to="{name:item.name}" v-for="item in data" :key="item.name">{{
            item.meta.name + separator
        }}</router-link>
    </div>
</template>
<script setup>
import {watchEffect,watch,toRefs} from 'vue'
    //vue3.2以后 defineEmits defineProps不再需要引入了，已经在全局了
    //声明props
    let props = defineProps({
        data:{
            type:Array,
            default(){
                return []
            }
        },
        separator:{
            type:String,
            default(){
                return "/"
            },
        },
        
    })
    //1.reactive直接重新赋值是否解除响应式
    //2.是否没有使用watch侦听props的变化
    //3.是否watchEffect不管用
    watchEffect(()=>{
        // console.log(props.data)
    })
    //解构props
    let {data,separator} = toRefs(props)
    // console.log(props)
</script>
<style scoped>
    .breadCrumb{
        border: 1px solid #ccc;
    }

    .breadCrumb a {
        font-size: 16px;
        font-weight: 600;
        color: rgb(45, 75, 75);
        font-style: '幼圆';
        margin: 0 10px;
    }
</style>